<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/tags.jsp"%>
<style type="text/css">
    #dialogContent_div {
	    width: 620px;
	    height: 600px;
	    top: 50%;
	    left: 50%;
	    margin-left: -300px;
	    margin-top: -220px;
	    position: absolute;
	    border: 1px solid #eee;
	    padding: 5px;
	    z-index: 1000;
	    background-color: #fff;
	}
	
	.dialog_title_bar {
	    height: 30px;
	    line-height: 30px;
	    padding-left: 10px;
	    background-color: #0A985D;
	    font-weight: bold;
	    font-size: 16px;
	}

	.dialog_content {
	    margin: 5px;
	    overflow: auto;
	    height: 520px;
	    border-bottom: 1px solid #e4e4e4;
	}

    .dialog_content select {
        width: 140px;
        margin-right: 10px;
    }	
    
	.dialog_button_bar {
	    float: right;
	}
	
	.dialog_button_bar a {
	    margin: 0 10px;
	    width: 80px;
	    height: 30px;
	    line-height: 30px;
	    border-radius: 6px;
	}
    
    table.imagetable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        width: 100%;
    }
    
    table.imagetable th {
        background:#b5cfd2;
       
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
        font-size: medium;
    }
    
    table.imagetable td {
        text-align:center;
        background:#FEFEFE;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #BfD6E1;
        font-size: medium;
    }
</style>
    
    <div class="dialog_title_bar">
        <span>设备与区域</span>
    </div>

    <div class="dialog_content">
        <form id='devRegionForm' name='devRegionForm'>
	    <table class="imagetable">
	
	        <tr>
	            <th>设备ID</th>
	            <th>管理处-路段-收费站</th>
	        </tr>
	
	        <c:forEach items="${devs}" var="ds" varStatus="s" >
	           
	            <tr>
	                <td>${ds.id}
	                   <input name="id" value="${ds.id }" type="hidden"/>
	                </td>
	                <td>
	                <div  class="select_wrap" data-id="${ds.id }" data-station-id="${ds.tollStationId }" data-road-id="${ds.roadId }" data-branch-id="${ds.branchId }">
		                <select name="branchId" class="branch fir_select" onchange="javascript:branchChange(this)">
		                </select>
		                <select name="roadId" class="road sec_select" onchange="javascript:roadChange(this)">
		                </select>
		                <select name="tollStationId" class="station three_select" onchange="">
		                </select>
		            </div>
	                </td>
	                
	            </tr>
	            
	        </c:forEach>
	
	    </table>
	    </form>
    </div>
    
    <div class="dialog_button_bar">
        <div>
            <a onclick="javascript:save()" class="a_button">保存</a>
            <a onclick="javascript:closeDialog()" class="a_button">取消</a>
        </div>
    </div>